* {
    box-sizing: border-box;
}

html,
body {
    padding: 0;
    margin : 0;
}

html {
    overflow: hidden;
    /*not necessary*/
}

body {
    width           : 100vw;
    height          : 100vh;
    perspective     : 100px;
    transform-style : preserve-3d;
    overflow-y      : auto;
    background-color: #25d8ab;
}

.main {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
}

.list-item {
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    position       : relative;
    width          : 100%;
    height         : 60vh;
    /*take care of the proportion,you will be surprised if you change it and even follow the design rules*/
    overflow       : hidden;
    /*hide the target while the content overflow the div*/
}

.list-item:hover .item-image::before {
    background-color: rgba(0, 0, 0, 0);
}

.item-image {
    position : absolute;
    width    : 100%;
    height   : 100%;
    z-index  : 0;
    transform: translateZ(-50px) scale(1.8, 1.8);
}

.item-image::before {
    content         : "";
    display         : block;
    position        : absolute;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, 0.3);
    transition      : all 0.3s ease;
}

.item-image img {
    display   : block;
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.item-text {
    color      : #ffffff;
    font-family: "Courier New", Courier, monospace;
    text-align : center;
}

.text-title {
    font-size    : 2rem;
    font-family  : "Bookman Old Style";
    font-weight  : bolder;
    margin-bottom: 20px;
}

.text-desc {
    font-size: 1.2rem;
}

.search {
    height          : 150px;
    width           : 100%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background-color: #5986a8;
}

.search input {
    height          : 100px;
    width           : 1000px;
    font-size       : 30px;
    align-items     : center;
    font-family     : "Poppins", sans-serif;
    color           : #f5f5f5;
    border-radius   : 50px;
    background-color: #859ead;
    outline         : none;
    border          : none;
    box-shadow      : 2px 3px 15px rgba(0, 0, 0, 0.5);
    padding-left    : 50px;
    caret-color     : #91afef;

    /* text-space: 10px; */
}

.search input:focus {
    border : none;
    outline: none;
}